<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
            integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"
            integrity="sha384-lpyLfhYuitXl2zRZ5Bn2fqnhNAKOAaM/0Kr9laMspuaMiZfGmfwRNFh8HlMy49eQ"
            crossorigin="anonymous"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<article class="body-warp shadow-lg p-3 mb-5 bg-body rounded">
    <div class="mb-3">
        <label for="fileType" class="form-label">文件类型</label>
        <input type="email" class="form-control" id="fileType" placeholder="js/css">
    </div>
    <div class="mb-3">
        <label for="fileStr" class="form-label">文件地址</label>
        <textarea class="form-control" id="fileStr" placeholder="输入“,” 拼接的字符串" rows="3"></textarea>
    </div>
    <div class="mb-3">
        <button type="button" class="btn btn-primary">提交</button>
        <button type="button" class="btn btn-secondary">清空</button>
    </div>
</article>
<style>
    .body-warp {
        width: 70%;
        margin: 50px auto;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 30px 40px;
    }
</style>
<script>
    window.onload = () => {

        let submit = document.querySelector('.btn-primary')
        let empty = document.querySelector('.btn-secondary')
        let jsCdnStr = [
            "https://unpkg.com/vue@2.6.11/dist/vue.min.js",
            "https://unpkg.com/vue-router@2.8.1/dist/vue-router.min.js",
            "https://unpkg.com/vuex@3.1.2/dist/vuex.min.js",
            "https://unpkg.com/element-ui@2.13.0/lib/index.js",
            "https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.6.4/antd.min.js",
            "https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/index.js",
            "https://cdn.bootcdn.net/ajax/libs/mathjs/7.5.1/math.min.js",
            "https://cdn.bootcss.com/echarts/4.0.4/echarts.min.js",
            "https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js",
            "https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js",
            "https://cdn.bootcss.com/crypto-js/3.1.9/crypto-js.min.js",
            "https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js",
            "https://cdn.bootcss.com/moment.js/2.20.1/locale/zh-cn.js"
        ]
        let cssCdnStr = ["//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css",
            '//at.alicdn.com/t/font_1007178_032fsrxb1pmi.css',
            '//cdn.bootcdn.net/ajax/libs/ant-design-vue/1.7.1/antd.min.css',
            ]
        const cssStr = cssCdnStr.map(v=>'https:'+v).join(',')
        const jsStr = jsCdnStr.join(',')
        // fileStr.value = cssStr
        submit.onclick = () => {
            axios.post('/getFileToLocal', {
                type: fileType.value,
                fileStr: fileStr.value
            }).then(res => {
                alert(res.message)
            })
        }
        empty.onclick = () => {
            fileType.value = ''
            fileStr.value = ''
        }
    }
</script>
</body>
</html>
